import './bubbletip.less';
// import Img from '../images/xp-tip.jpg';
// 计时
let timer;
/**
 * @description: Show picture prompt box
 * @param {type}  url {String}
 * @return: none
 */
const showPic = (url) => {
  const mask = document.createElement('div');
  mask.classList.add('masker');
  const imgContain = document.createElement('div');
  imgContain.classList.add('imgContain');
  const title = document.createElement('div');
  title.classList.add('title');
  const intr = document.createElement('div');
  intr.classList.add('intr');
  intr.innerHTML = '使用说明';
  const close = document.createElement('div');
  close.classList.add('close');
  close.innerHTML = '×';
  title.appendChild(intr);
  title.appendChild(close);
  const imgCon = document.createElement('div');
  imgCon.classList.add('imgCon');
  imgCon.innerHTML = `<img src=${url}>`;
  document.body.appendChild(mask);
  mask.appendChild(imgContain);
  imgContain.appendChild(title);
  imgContain.appendChild(imgCon);
  // 关闭提示框
  close.addEventListener('click', () => {
    document.body.removeChild(mask);
  });
};
/**
 * @description: Add a bubble tip to the specified element
 * @return: node {document}
 */
const createDialog = () => {
  const dialog = document.createElement('div');
  dialog.innerHTML =
    '系统检测您的浏览器版本过低，如遇到图片无法正常打印。点击”这里"查看解决方法';
  dialog.classList.add('commonmask');
  const triangle = document.createElement('div');
  triangle.classList.add('triangle');
  dialog.appendChild(triangle);
  return dialog;
};

/**
 * @description: Specific code
 * @param {type} parentDomClass {String} 公共父级容器
 * @param {type} targetDomClass {String} 需要绑定气泡的具体dom的类名
 * @return: none
 */
const addtips = (parentDomClass, targetDomClass) => {
  const container = document.querySelector(parentDomClass);
  if (!container) return;
  // 事件代理
  container.addEventListener('mouseover', (e) => {
    if (e.target.classList.contains(targetDomClass)) {
      const maskCon = document.querySelectorAll('.commonmask');
      // 清除其它未消失的气泡
      if (maskCon) {
        for (let i = 0; i !== maskCon.length; i += 1) {
          document.body.removeChild(maskCon[i]);
        }
      }
      // 创建提示框
      const dialog = createDialog();
      document.body.appendChild(dialog);
      // 设置提示框位置
      const { left, top } = e.target.getBoundingClientRect();
      const { height } = dialog.getBoundingClientRect();
      dialog.style.left = `${left - 160}px`;
      dialog.style.top = `${top - height - 8}px`;
      // 鼠标移出删除提示框
      e.target.addEventListener('mouseleave', () => {
        if (dialog) {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            try {
              document.body.removeChild(dialog);
            } catch (re) {
              // console.log(re);
            }
          }, 300);
        }
      });
      dialog.addEventListener('mouseenter', () => {
        clearTimeout(timer);
      });
      dialog.addEventListener('mouseleave', () => {
        timer = setTimeout(() => {
          try {
            document.body.removeChild(dialog);
          } catch (re) {
            // console.log(re);
          }
        }, 300);
      });
      dialog.addEventListener('click', () => {
        showPic(
          'http://image.guahao.cn/bhc-public-static/images/print_tip.jpg',
        );
      });
    }
  });
};

// function detectXP() {
//   const sUserAgent = navigator.userAgent;
//   const isWinXP =
//     sUserAgent.indexOf('Windows NT 5.1') > -1 ||
//     sUserAgent.indexOf('Windows XP') > -1;
//   if (isWinXP) {
//     return true;
//   }
// }

window.onload = function () {
  addtips('.container', 'cla');
  // if (detectXP()) {
  //   addtips('.jwy-content', 'showbubble');
  // }
};
